<template>
    <view class="container">
        <header-bar :config="config" @rightClick="addOrderClick"></header-bar>
        <search-bar ref="orderSearch" :placeholderText="placeholderText" @searchFn="searchFn" :actions="actions"
            @actionFn="filterOpen">
            <template v-slot:assort>
                <view class="search-type" @click.stop>
                    <view @click="isShowSearchTypeList = !isShowSearchTypeList">
                        {{ curSearchType }} <uni-icons type="arrowdown" size="24" customIcons="icon-black"
                            style="padding-left: 8rpx;"></uni-icons>
                    </view>
                    <view ref="searchTypeList" class="search-type-list" v-if="isShowSearchTypeList">
                        <view class="icon"></view>
                        <view class="list">
                            <text @click="chooseType('商品')" :class="{ active: curSearchType == '商品' }">商品</text>
                            <view class="line"></view>
                            <text @click="chooseType('会员')" :class="{ active: curSearchType == '会员' }">会员</text>
                        </view>
                    </view>
                </view>
            </template>
        </search-bar>
        <view class="main">
            <record-list ref="recordList" :height="listHeight"></record-list>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import searchBar from "@/components/common/search-bar.vue"
import recordList from "./record-list.vue"
export default {
    components: {
        searchBar,
        recordList,
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        visible: {
            handler(newVal) {
                if (this.visible) {
                    if (this.$refs.orderList) {
                        this.$refs.orderList.refresh()
                    }
                    if (this.$refs.returnList) {
                        this.$refs.returnList.refresh()
                    }
                }
                this.$nextTick(() => { })
            },
            immediate: true,
        },
        //监听更新
        getUpOrderView(e) {
            if (this.tabIndex == 0 && this.$refs.orderList) {
                this.$refs.orderList.refresh()
            }
            if (this.tabIndex == 1 && this.$refs.returnList) {
                this.$refs.returnList.refresh()
            }
        },
    },
    data() {
        return {
            // 输入会员名称或商品名称
            placeholderText: "输入商品名称",
            config: {
                title: "一客一价记录",
                back: true,
                centerSlot: true,
                rightSlot: true,
                color: ["#ffffff"],
                statusBarFontColor: "#ffffff",
                backPage: "/pages/index/index",
                rightBtns: [
                    {
                        id: 1,
                        btnType: 1,
                        type: "新增",
                    },
                ],
            },
            actions: [],
            listHeight: "",
            loadOk: false,
            filterData: {
                searchKey: "",
            },
            refresh: false,
            curSearchType: "商品",
            searchTypes: ["商品", "会员"],
            isShowSearchTypeList: false,
        }
    },
    computed: {
        ...mapGetters(["getUpOrderView"]),
    },
    created() {
        let mainColor = this.easyGetColor("main")
        this.config.backgroundColor = [1, mainColor]
    },
    mounted() {
        document.addEventListener('click', this.closeSearchTypeList);
        this.getListHeight()
        uni.share({
            provider: "weixin",
            scene: "WXSceneSession",
            imageUrl: "",
            type: 0,
            href: "https://www.baidu.com",
            title: "订单详情",
            summary: "待支付订单",
            success: function (res) {
                console.log("success:" + JSON.stringify(res))
            },
            fail: function (err) {
                console.log("fail:" + JSON.stringify(err))
            },
        })
    },
    beforeDestroy() {
        document.removeEventListener('click', this.closeSearchTypeList);
    },
    onShow() { },
    methods: {
        getListHeight() {
            //获取商品高度 44 60
            getElementHeight(this, ".main", (e) => {
                console.log(e)
                //#ifdef H5
                this.listHeight = e + "px"
                //#endif
                //#ifdef APP
                this.listHeight = e - 134 + "px"
                //#endif
                this.loadOk = true
            })
        },
        closeSearchTypeList(event) {
            this.isShowSearchTypeList = false;
        },
        chooseType(type) {
            if (type == "商品") {
                this.placeholderText = "输入商品名称"
            } else if (type == "会员") {
                this.placeholderText = "输入会员名称"
            }
            this.curSearchType = type
            this.isShowSearchTypeList = false
        },
        searchFn(key) {
            this.filterData = {}
            if (this.curSearchType == "商品") {
                this.filterData = {
                    searchKey: key
                }
            } else if (this.curSearchType == "会员") {
                this.filterData = {
                    RelationSearchKey: key
                }
            }
            this.$refs.recordList.refresh(this.filterData)
        },
        openStarDate() {
            //打开选择开始日期
            this.$refs.startDate.open()
        },
        confirmStarDate(e) {
            //选择开始日期
            this.filterData.startTime = e.fulldate;
            this.filterData.endTime = ""
        },
        openEndDate() {
            //打开选择结束日期
            this.$refs.endDate.open()
        },
        confirmEndDate(e) {
            //选择结束日期
            this.filterData.endTime = e.fulldate
        },
        openStarDateReturn() {
            //打开选择开始日期
            this.$refs.startDateReturn.open()
        },
        confirmStarDateReturn(e) {
            //选择开始日期
            this.filterReturnData.startTime = e.fulldate
            this.filterReturnData.endTime = ""
        },
        openEndDateReturn() {
            //打开选择结束日期
            this.$refs.endDateReturn.open()
        },
        confirmEndDateReturn(e) {
            //选择结束日期
            this.filterReturnData.endTime = e.fulldate
        },
        filterOpen() {
            this.$refs.showRight.open()
        },
        filterClose() {
            this.$refs.showRight.close()
        },
        //重置
        cancelFilterState() {
            this.orderState.forEach((e) => {
                e.checked = false
            })
            this.$forceUpdate()
        },
        //重置
        cancelFilterReturnState() {
            this.returnState.forEach((e) => {
                e.checked = false
            })
            this.$forceUpdate()
        },
        //
        changeState(index) {
            this.orderState[index].checked = !this.orderState[index].checked
            this.$forceUpdate()
        },
        changeReturnState(index) {
            this.returnState[index].checked = !this.returnState[index].checked
            this.$forceUpdate()
        },
        filterStateFn() {
            let ids = []
            this.orderState.forEach((e) => {
                if (e.checked) {
                    ids.push(e.Key)
                }
            })
            this.filterData.orderState = ids.join(",")
        },
        filterReturnStateFn() {
            let ids = []
            this.returnState.forEach((e) => {
                if (e.checked) {
                    ids.push(e.Key)
                }
            })
            this.filterReturnData.states = ids.join(",")
        },
        setFn() {
            // this.filterData.valetType = this.valetType
            // this.filterData.payState = this.payState
            this.filterStateFn()
            console.log(this.filterData)
            this.$refs.orderList.refresh(this.filterData)

            this.filterClose()
        },
        resetFn() {
            this.filterData.startTime = ""
            this.filterData.endTime = ""
            this.valetType = -1
            this.payState = -1
            this.cancelFilterState()
            this.setFn()
        },
        setReturnFn() {
            this.filterReturnData.optType = this.optType
            this.filterReturnStateFn()
            console.log(this.filterReturnData)
            this.$refs.returnList.refresh(this.filterReturnData)

            this.filterClose()
        },
        resetReturnFn() {
            this.filterReturnData.startTime = ""
            this.filterReturnData.endTime = ""
            this.optType = -1
            this.cancelFilterReturnState()
            this.setReturnFn()
        },
        changeOptType(type) {
            if (this.optType == type) {
                this.optType = -1
            } else {
                this.optType = type
            }
            console.log(this.optType)
        },
        changeValetTye(type) {
            if (this.valetType == type) {
                this.valetType = -1
            } else {
                this.valetType = type
            }
            console.log(this.valetType)
        },
        changePayState(type) {
            if (this.payState == type) {
                this.payState = -1
            } else {
                this.payState = type
            }
            console.log(this.payState)
        },
        addOrderClick(e) {
            if (e.id == 1) {
                this.easyGoTo("/pages/private/edit")
            }
        },
    },
}
</script>

<style lang="scss">
.search-type {
    position: relative;
    font-size: 24rpx;
    padding: 0 12rpx;
}

.search-type-list {
    left: -10px;
    position: absolute;
    top: 60rpx;
    z-index: 51;

    .icon {
        background-color: #fff;
        height: 1.46667vw;
        left: 47%;
        position: absolute;
        top: -.73333vw;
        transform: rotate(45deg);
        width: 1.46667vw;
    }

    .list {
        align-items: center;
        background-color: #fff;
        border-radius: 20rpx;
        box-shadow: 0 2px 20px 0 rgba(41, 32, 32, .2);
        display: flex;
        flex-direction: column;
        height: 120rpx;
        justify-content: space-around;
        padding: 20rpx 0;
        width: 120rpx;

        text {
            display: block;
            font-size: 28rpx;
        }

        .active {
            color: #F1270C;
        }

        .line {
            border-top: 1px solid #d8d8d8;
            height: 1px;
            width: 65%;
        }
    }
}

.date-select {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100rpx;

    .date-input {
        flex: 1;
        display: flex;
        justify-content: center;
        border-bottom: solid 1rpx $border;
        padding-bottom: 16rpx;
    }

    .to {
        margin: 0 20rpx;
    }
}

.drawer {
    z-index: 100 !important;
}

.search-box {
    height: 96rpx;
}
</style>
